import React, { Component } from 'react'
import { Form, Icon, Input, Button,message } from 'antd';
import {Redirect} from 'react-router-dom'
import logo from '../../assets/images/logo192.png'
import './Login.less'
import {reqLogin} from '../../api/index'
import storageUtils from '../../utils/storageUtils'
import memoryUtils from '../../utils/memoryUtils'

class Login extends Component {
    handleSubmit = e => {
        // 阻止表单的默认行为，默认提交
        e.preventDefault();
        this.props.form.validateFields(async (err, {username, password}) => {
            if (!err) {
                // 发送ajax请求获取数据
                //const result = reqLogin({username},{password}) // 如果不加await，此处返回的是一个pending状态的promise【Promise {<pending>}】
                const result = await reqLogin(username,password) // 返回的是一个对象的值
                // 登录成功
                if(result.status===0){
                    const user = result.data
                     // 登录成功后将用户的信息存储到localstorage中【方式一】
                    // localStorage.setItem('user_key',JSON.stringify(user))

                    // 登录成功后将用户的信息存储到localstorage中【方式二】
                    storageUtils.saveUser(user)
                    // 将用户信息存储到内存中
                    memoryUtils.user = user

                    this.props.history.replace('/admin')
                    message.success('登录成功')
                    
                }else if(result.status===1){
                    message.error(result.msg)
                }
            }else{
                alert('验证失败')
            }
          });
      };

    //   自定义的密码校验规则
      validatorPwd=(rule, value, callback)=>{
        //   如果value为空，但是要使用trim(),需要给一个初始化值，否则可能不报错就找不到错误
          value = value.trim()
        if(!value){
            callback('密码不能为空！')
        }else if(value && value.length < 4){
            callback('密码必须大于等于4位')
        }else if(value && value.length > 12){
            callback('密码必须小于等于12位')
        }else if(!/^[a-zA-Z0-9_]+$/.test(value)){
            callback('必须是英文、数字或下划线组成')
        }else{
            // Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
            callback()
        }
      }
    

    render() { 
        // 获取用户信息【方式一】
        // const user = JSON.parse(localStorage.getItem('user_key') || '{}')

        // 获取用户信息【方式二】
        const user = memoryUtils.user
        if(user._id){
            return <Redirect to="/admin"/>
        }

        // 接收到的 getFieldDecorator ，这个值是一个form对象中的值
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="login">
                <div className="login_header">
                    <img src={logo} alt="" />
                    <h1>后台管理系统</h1>
                </div>
                <div className="login_content">
                    <h2>用户登录</h2>
                    <div className="login_form">
                    <Form onSubmit={this.handleSubmit} className="login-form">
                                <Form.Item>
                                {getFieldDecorator('username', { // 配置对象，属性名是一个特定的名称
                                /*
                                    用户名/密码的的合法性要求
                                    1). 必须输入
                                    2). 必须大于等于4位
                                    3). 必须小于等于12位
                                    4). 必须是英文、数字或下划线组成
                                */
                                    rules: [
                                        { required: true, message: '请输入用户名' },
                                        { min: 4, message: '必须大于等于4位'},
                                        { max: 12, message: '必须小于等于12位'},
                                        // [a-zA-Z0-9_]+ 必须是a-zA-Z0-9_开头，+代表后面的也需要是这些字符
                                        { pattern: /^[a-zA-Z0-9_]+$/, message: '必须是英文、数字或下划线组成'},
                                ],
                                })(
                                    <Input
                                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    placeholder="Username"
                                    />,
                                )}
                                </Form.Item>
                                <Form.Item>
                                {getFieldDecorator('password', {
                                    initialValue: '', // 初始值
                                    rules: [
                                        { validator: this.validatorPwd }
                                    ],
                                })(
                                    <Input
                                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    type="password"
                                    placeholder="Password"
                                    />,
                                )}
                                </Form.Item>
                                <Form.Item>
                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    Log in
                                </Button>
                                </Form.Item>
                        </Form>
                   </div>
                </div>
            </div>
        )
    }
}

/**
 * 理解Form 组件：是包含 <Form> 的组件
 * 利用Form.create()包装Form组件生成一个新的组件
 * 新组件会向form组件传递一个强大的属性：属性名：form，属性值对象
 */

 /**
  * 高阶函数
  *     定义：接收的参数是函数或则返回值是函数
  *     常见的：数组遍历相关的方法 / 定时器 / Promise / 高阶函数
  *     作用：实现一个更加强大，动态的功能
  */

  /**
   * 高阶组件：
   *    本质是组件类，是一个构造函数，组件对象是一个实例
   *    函数接收一个组件，返回一个新的组件
   *    Form.create()返回的就是一个高阶组件
   */

const WrappedLoginForm = Form.create()(Login);

export default WrappedLoginForm